<template>
  <div id="songsheet">
    <div class="header">
      <div class="BJ-tp">
        <img :src="perArr.coverImgUrl" />
      </div>
      <div class="h-h">
        <div class="h-left">
          <img :src="perArr.coverImgUrl" />
          <p>{{ (perArr.playCount / 10000).toFixed(0) }}万</p>
          <i class="iconfont icon-headset" style="font-size: 20px"></i>
          <h6>歌单</h6>
        </div>
        <div class="h-right">
          <span>{{ perArr.name }}</span>
          <router-link class="h-tp" tag="div" :to="`/personalcenter/${perArr.userId}`">
              <img :src="perArr.creator.avatarUrl" alt="" />
              <p>{{ perArr.creator.nickname }}</p>
          </router-link>
        </div>
      </div>
    </div>
    <h3>歌曲列表</h3>
    <de :perArr1="perArr1"> </de>
    <h3>精彩评论</h3>
     <pl :commentArr="perArr2"></pl>
    <div class="fo">
      <div class="fo-w">
        <span>
          <i class="iconfont icon-watermelon" style="font-size: 36px"></i>
          收藏歌单</span
        >
      </div>
    </div>

   
  </div>
</template>

<script>
import de from "../components/Det.vue";
import pl from "../components/comment.vue";
export default {
  data: () => {
    return {
      // perArr: JSON.parse(localStorage.getItem("perArr")) || [],
      // perArr1: JSON.parse(localStorage.getItem("perArr1")) || [],
      // perArr2: JSON.parse(localStorage.getItem("perArr2")) ||[],
      perArr:[],
      perArr1:[],
      perArr2:[],
    };
  },
  async mounted() {
    let res = await this._axios.get(`/playlist/detail?id=${this.$route.params.id}`);
    this.perArr = res.data.playlist;
    this.perArr1 = res.data.playlist.tracks;
    console.log(res);
    console.log(this.perArr);

    let resover = await this._axios.get(`/comment/playlist?id=${this.$route.params.id}`);
    this.perArr2 = resover.data.comments;

    console.log(resover);
  },
  components: {
    de,
    pl,
  },
  // watch: {
  //   perArr() {
  //     localStorage.setItem("perArr", JSON.stringify(this.perArr));
  //   },
  //   perArr1() {
  //     localStorage.setItem(" perArr1", JSON.stringify(this.perArr1));
  //   },
  //    perArr2() {
  //     localStorage.setItem(" perArr2", JSON.stringify(this.perArr2));
  //   },
  // },
};
</script>

<style lang="scss" scoped>
#songsheet {
  // overflow: auto;
  // height: _vw(1200);
  width: _vw(750);
  h3 {
    height: _vw(50);
    padding-left: _vw(20);
    background-color: #eeeff0;
    font-size: _vw(12);
    color: #666;
    line-height: _vw(50);
  }
  .header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .BJ-tp {
      position: relative;
      top: 0;
      left: 0;
      z-index: -2;
      // overflow: hidden;
      width: _vw(750);
      height: _vw(370);
      background-color:rgba(0, 0, 0, 0.8);
      img {
        width: 100%;
        transform: translateY(-47%);
        filter: blur(10px);
      }
    }
    .h-h {
      position: absolute;
      width: _vw(670);
      height: _vw(250);
      display: flex;

      .h-left {
        width: _vw(250);
        height: _vw(250);
        position: relative;
        img {
          height: 100%;
        }
        p {
          color: #fff;
          top: 0;
          right: 0;
          position: absolute;
        }
        i {
          position: absolute;
          top: _vw(-5);
          right: _vw(80);
          color: #fff;
        }
        h6 {
          position: absolute;
          top: _vw(20);
          left: 0;
          padding: 0 _vw(16);
          height: _vw(34);
          color: #fff;
          font-size: _vw(18);
          text-align: center;
          line-height: _vw(34);
          background-color: rgba(217, 48, 48, 0.8);
          border-top-right-radius: _vw(34);
          border-bottom-right-radius: _vw(34);
        }
      }
      .h-right {
        width: _vw(430);
        margin-left: _vw(20);
        span {
          display: inline-block;
          margin-bottom: _vw(60);
          margin-top: _vw(5);
          font-size: _vw(36);
          color: #fefefe;
        }
        p {
          color: hsla(0, 0%, 100%, 0.7);
        }
        .h-tp {
          display: flex;
          align-items: center;

          img {
            width: _vw(60);
            border-radius: 50%;
          }
          p{
            overflow: hidden;
            text-overflow: ellipsis;
            word-spacing: none;
          }
        }
      }
    }
  }
  .fo {
    .fo-w {
      background-color: #fff;
      height: _vw(100);
      width: _vw(750);
      position: sticky;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        display: flex;
        justify-content: center;
        width: _vw(610);
        height: _vw(80);
        background-color: #ff3a3a;
        text-align: center;
        line-height: _vw(80);
        border-radius: _vw(50);
        color: #fff;
        font-size: _vw(36);
      }
    }
  }
}
</style>